﻿<!doctype html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>MOV</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
<link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="font-awesome/4.6.1/css/font-awesome.min.css">
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="css/owl.theme.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="css/jpushmenu.css" rel="stylesheet" type="text/css">
  <script src="../../../../../../bilibili/js/DPlayer.min.js"></script>
  <script src="../../../../../../bilibili/js/bootstrap.min.js"></script>
</head>
<body class="push-body">
<header id="main-navigation">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12"> <a href="#" class="navbar-brand pull-right"></a>
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left"> <a href="#" class="push_nav_brand">AntzUhl</a>
          <ul class="push_nav">
            <li><a class="active scroll" href="#home">首页</a></li>
            <li><a class="scroll" href="#aboutme">关于</a></li>
            <li><a class="scroll" href="#mywork">电影</a></li>
            <li><a class="scroll" href="#contactme">联系</a></li>
          </ul>
          <ul class="icons">
            <li><a href="#." class="fa"><i class="fa fa-fw fa-facebook"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-twitter"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-google-plus"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-linkedin"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-pinterest-p"></i></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <div class="main-button left">
    <button class="toggle-menu menu-left push-body"> <span></span> <span></span> <span></span> </button>
  </div>
</div>

<!-- Info-->
<div id="home" class="row section">
  <div class="container info text-center">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="info_detail">
          <div class="zoom"><img src="/alex.jpg" alt="alex">
            <div class="zoom-overlay"></div>
          </div>
          <h3>AntzUhl</h3>
          <p>脑机接口创造“第六感”,公众号【肥宅与画家】</p>
          <!-- Social Icons -->
          <div class="icons">
            <ul>
              <li><a href="#." class="fa fb"><i class="fa fa-fw fa-facebook"></i></a></li>
              <li><a href="#." class="fa tw"><i class="fa fa-fw fa-twitter"></i></a></li>
              <li><a href="#." class="fa gp"><i class="fa fa-fw fa-google-plus"></i></a></li>
              <li><a href="#." class="fa in"><i class="fa fa-fw fa-linkedin"></i></a></li>
              <li><a href="#." class="fa pin"><i class="fa fa-fw fa-pinterest-p"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="button"> <a href="#contactme" data-target="contactme" class="btn active scroll">联系我</a> <a href="#mywork" data-target="mywork" class="btn scroll">电影</a> </div>
  </div>
</div>

<!-- About -->
<div id="aboutme" class="row section">
  <div class="container career text-center">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="animate fadeInRight">
          <div class="heading">
            <h1>关于此站</h1>
            <p>这是一个用来存放我云端视频数据的服务器交互页面，为局域网内的设备提供高速的视频观看体验。</p>
          </div>
        </div>
        <div class="col-md-12 text-center">
        <div id="text-demo" class="owl-carousel">
			<div class="item text-center">
                  <h2>访问声明</h2>
                  <em>AntzUhl<span> 2019-10-29</span></em>
                  <p>服务搭建于局域网内，只需连接到设备即可直接访问，无需消耗流量。</p>
            </div>
			<div class="item text-center">
				 <h2>技术栈选型</h2>
                  <em>AntzUhl,<span> 2019-10-29</span></em>
                  <p>SpringBoot，SpringCloudAlibaba,Mysql,MyBatis,Elasticsearch,Thymeleaf</p>
    		</div>
		    <div class="item text-center">
				<h2>关于视频资源</h2>
                  <em>AntzUhl,<span> 2019-10-29</span></em>
                  <p> 视频资源主要为大部分网络课程以及网剧，还有使用以前项目中用B站分布式爬虫爬取的我收藏夹中的视频。 </p>
            </div>
		    <div class="item text-center">
				<h2>关于服务迁移</h2>
                  <em>AntzUhl,<span> 2019-10-29</span></em>
                  <p> 本站完全开源，可从Github中获取源码自行搭建。 </p>
  		    </div>
	    </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Work -->

<div id="mywork" class="row section">
  <div class="container-fluid work text-center">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="animate fadeInRight">
          <div class="head">
            <h1>视频资源</h1>
          </div>
        </div>
        <div class="col-xs-12 work_filter text-center">
          <div class="row">
            <div class="animate fadeInLeft">
              <ul class="breadcrumb">
                <li><a href="#." class="filter active" data-filter="all">全部</a></li>
              </ul>
              <ul class="breadcrumb" th:each="item:${type}">
                <li><a href="#." class="filter" th:data-filter="@{'.'+${item.typeName}}"><span th:text="${item.summary}"></span></a></li>
              </ul>
            </div>
            <div class="gallery">
              <div class="row" >
                <div th:each="item:${data}">
                <div class="mix" th:classappend="${item.mvType}">
                  <div class="mix_sec">
                    <div class="imageContainer">
                      <a class="fancybox" th:href="@{'/mov/'+${item.mvId}}" data-fancybox-group="gallery">
                        <h4><span th:text="${item.mvName}"></span></h4>
                        <p><span th:text="${item.summary}"></span></p>
                      </a>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-12 title text-center">
          <div class="animate fadeInRight">
            <h1>是否想拥有自己的局域网影院?</h1>
            <div class="getin"> <a class="scroll" href="#contactme" data-target="contactme">Get In Touch</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- contact me -->
<div id="contactme" class="row section">
  <div class="container contact">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="animate fadeInRight">
          <div class="heading">
            <h1>联系</h1>
            <p>个人公众号【肥宅与画家】.</p>
          </div>
        </div>
        <div class="col-md-7 col-sm-12 col-xs-12 field">
          <div class="animate bounceInLeft">
            <form>
              <div class="user">
                <input type="text" value="Name" />
                <i class="fa fa-user" aria-hidden="true"></i></div>
              <div class="user">
                <input type="text" value="Email" />
                <i class="fa fa-envelope" aria-hidden="true"></i></div>
              <textarea name="Message">Message here</textarea>
              <input type="submit" value="提交" />
            </form>
          </div>
        </div>
        <div class="col-md-4 col-sm-8 col-xs-12 contact_info">
          <div class="animate bounceInRight">
            <h3> Get In Touch</h3>
            <div class="contact_sec">
              <ul>
                <li><i class="fa fa-home" aria-hidden="true"></i><span>不吃香菜星人</span></li>
                <li><i class="fa fa-phone" aria-hidden="true"></i><span>Phone: xxxxxxx</span></li>
                <li><i class="fa fa-cloud" aria-hidden="true"></i><span>Fax: xxxxxxx</span></li>
                <li><i class="fa fa-envelope-o" aria-hidden="true"></i><span>Email: <a href="#."> antzuhl1998@gmail.com</a></span></li>
              </ul>
            </div>
            <!-- Social Icons -->
            <div class="contact_icons">
              <ul>
                <li><a href="#." class="fa fb"><i class="fa fa-fw fa-facebook"></i></a></li>
                <li><a href="#." class="fa tw"><i class="fa fa-fw fa-twitter"></i></a></li>
                <li><a href="#." class="fa gp"><i class="fa fa-fw fa-google-plus"></i></a></li>
                <li><a href="#." class="fa in"><i class="fa fa-fw fa-linkedin"></i></a></li>
                <li><a href="#." class="fa pin"><i class="fa fa-fw fa-pinterest-p"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-xs-12 footer text-center">
          <div class="animate fadeInLeft">
            <p>Copyright &copy; 2019.Company AntzUhl.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<a href="#." class="cd-top">TOP</a> 
<!--JS File--> 

<script type="text/javascript" src="js/jquery-2.2.3.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/jquery.circliful.min.js"></script> 
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 
<script type="text/javascript" src="js/jquery.fancybox.js"></script> 
<script type="text/javascript" src="js/waypoints.js"></script> 
<script type="text/javascript" src="js/jquery.appear.js"></script> 
<script type="text/javascript" src="js/jpushmenu.js"></script> 
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</body>
</html>

